<template>
  <div>
    <div class="choseLappingText">
      <van-field
        :value="ChoseLappingIndex ? activeText[1] : activeText[0]"
        :border="false"
        readonly
        @click="handleSelectFirst"
        placeholder="请选择交叉条件一"
        :class="selectLappingBlur === 0 ? 'firstLapping selectSecendLapping' : 'firstLapping'"
      />
      <div @click="handleChangeChoseLappingIndex" class="qiehuan_container">
        <svg-icon icon="qiehuan" class="qiehuan"></svg-icon>
      </div>
      <van-field
        :value="ChoseLappingIndex ? activeText[0] : activeText[1]"
        readonly
        :border="false"
        placeholder="请选择交叉条件二"
        @click="handleSelectSecend"
        :class="selectLappingBlur === 1 ? 'firstLapping selectSecendLapping' : 'firstLapping'"
      />
    </div>
    <div class="overlapping">
      <van-tree-select
        :items="pupValue"
        :main-active-index="mainActiveIndex"
        :active-id="activeId"
        @click-nav="onClickNav"
        @click-item="onClickItem"
      />
      <div class="overlappingButtonGroup">
        <van-button plain type="default" @click="handleCancel" class="overlappingButton">取消</van-button>
        <van-button
          plain
          type="default"
          @click="handleDetermine"
          class="overlappingButton"
          :disabled="activeId.length === 2 ? false : true"
          >确定</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['pupValue'],
  data() {
    return {
      mainActiveIndex: 0,
      activeId: [], // 选中id
      activeText: [], // 选中文字
      // activeDetails: [],
      overlappingFirst: '',
      overlappingSecend: '',
      selectLappingBlur: 0,
      ChoseLappingIndex: false // 选中是否换位置
    }
  },
  methods: {
    onClickNav(detail) {
      this.mainActiveIndex = detail
      console.log('mainActiveIndex', this.mainActiveIndex)
    },
    handleSelectFirst() {
      this.selectLappingBlur = 0
    },
    handleSelectSecend() {
      this.selectLappingBlur = 1
    },

    onClickItem(detail) {
      const index = this.activeId.indexOf(detail.id)
      if (index > -1) {
        return
      } else if (this.activeId.length < 2) {
        this.activeId.push(detail.id)
        this.activeText.push(detail.text)
        if (this.activeId.length === 1) {
          this.selectLappingBlur = 1
        } else if (this.activeId.length === 2) {
          this.selectLappingBlur = 2
        }
      } else if (this.activeId.length >= 2 && this.selectLappingBlur !== 2) {
        this.activeId[this.selectLappingBlur] = detail.id
        this.activeText.splice(this.selectLappingBlur, 1, detail.text)
        return
      }
    },
    handleDetermine() {
      const overlappingFields = [
        { name: this.activeText[0], code: this.activeId[0] },
        { name: this.activeText[1], code: this.activeId[1] }
      ]
      this.$emit('overLappingDetermine', false, overlappingFields)
      this.activeId = [] // 选中id清空
      this.activeText = [] // 选中文字清空
      // this.activeDetails = []
      this.mainActiveIndex = 0 // 回到默认第一个选项
    },
    handleCancel() {
      this.activeId = []
      this.activeText = []
      // this.activeDetails = []
      this.mainActiveIndex = 0
      this.$emit('closepup', false)
    },
    handleChangeChoseLappingIndex() {
      this.ChoseLappingIndex = !this.ChoseLappingIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.choseLappingText {
  display: flex;
  justify-content: space-around;
  margin-bottom: 14px;
  .firstLapping {
    height: 40px;
    width: 148px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
  }
  .secondLapping {
    height: 40px;
    width: 148px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
  }
  .selectSecendLapping {
    border: 1px solid rgba(255, 255, 255, 1);
  }
  .qiehuan_container {
    margin: auto 0px;
    .qiehuan {
      height: 24px;
      width: 24px;
    }
  }

  /deep/.van-field__control {
    color: #fff;
  }
}

.overlapping {
  width: 100vw;
  /deep/.van-tree-select {
    height: 30vh !important;
    // padding: 0px 10px;
  }
  /deep/.van-sidebar-item {
    background-color: transparent;
  }
  /deep/.van-tree-select__nav-item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__content {
    background: #032571;
  }
  /deep/.van-tree-select__nav {
    background: #092d7e;
  }
  /deep/.van-sidebar-item--select,
  .van-sidebar-item--select:active {
    background-color: #032571;
    color: rgba(255, 255, 255, 1);
  }

  /deep/.van-tree-select__item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__item--active {
    color: rgba(255, 255, 255, 1);
  }
  .labelOverlapping {
    display: flex;
    justify-content: space-between;
    height: 70px;
    line-height: 70px;
    background-color: rgba(28, 30, 72, 1);
  }
  .overlappingButtonGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 13px 20px;
    .overlappingButton {
      width: 160px;
      height: 48px;
      font-size: 16px;
    }
  }
}
</style>
